﻿    @model GUI.Models.ArticleModel

@{
    ViewBag.Title = "Create";

    Layout = "~/Views/Shared/_Layout.cshtml";
   
}

<style>
    .tablecss {
        color: red;
    }
        .tblarticle, td, th {
   
     padding: 15px;
     background-color:#FFFFFF;
     
}

   input[type="file"] {
  background-color:white; 
  font:bold 14px Arial, Helvetica, sans-serif; 
  color:#3287C8; 
  border:thick; 
  cursor:pointer; 
 
}
    .to {
        color :green;
        width:30%;
    }

    
</style>
<link href="~/Content/jquery-ui/jquery-uidatepicker.css" rel="stylesheet" />
<script src="@Url.Content("~/Scripts/jquery-1.8.2.js")"></script>
<script src="~/Scripts/jquery-ui-1.10.4.js"></script>
<script src="~/Content/AdminLTE/js/plugins/datepicker/bootstrap-datepicker.js"></script>
<link href="~/Content/AdminLTE/css/bootstrap.min.css" rel="stylesheet" />
 <script src="@Url.Content("~/Scripts/modernizr-2.6.2.js")" type="text/javascript"></script>
 
        <!-- font Awesome -->
        <link href="~/Content/AdminLTE/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
        <!-- Theme style -->
     <link href="~/Content/AdminLTE/css/ionicons.css" rel="stylesheet" />
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
        <!-- Bootstrap -->
   <script src="~/Content/AdminLTE/js/app.js"></script>
   <script src="~/Content/AdminLTE/js/bootstrap.min.js"></script> 
  


  <div id ="auth">

  </div>


  
    

      




           
  
    <div class="margin">
                                      
                                        <div class="btn-group">
                                            <button type="button" class="btn btn-info btn-flat">Action</button>
                                            <button type="button" class="btn btn-info btn-flat dropdown-toggle" data-toggle="dropdown">
                                                <span class="caret"></span>
                                                <span class="sr-only">Toggle Dropdown</span>
                                            </button>
                                            <ul class="dropdown-menu" role="menu">
                                                <li>@Html.ActionLink(" Back To List","Index", new {id = @ViewBag.session})</li>
                                                   
                                            </ul>
                                        </div>
                                        
                                  
                                    </div>               


   

  <div class="box box-primary">
                                <div class="box-header">
                                    <h3 class="box-title"> Article </h3>
                                </div><!-- /.box-header -->


@using (Html.BeginForm("Create", "Articles", FormMethod.Post, new { @enctype = "multipart/form-data", id = "profilepicture" }))
{
    @Html.ValidationSummary(true)
<table class="tblarticle"  >
    <caption> <div class="">
    


           
        </div></caption>
    <tr>
        <td> @Html.ListBox("ThemeList", ViewBag.ThemeList as MultiSelectList,
                   new { @class = "chzn-select", data_placeholder = "Choose Themes...", style = "width:350px;" })</td>
    
        <td> @Html.EditorFor(model => model.LabelDateCreation, new { @class="datepicker"})</td>
     
    <tr>
        <td class="txttile"colspan="3">   @Html.TextAreaFor(model => model.Title, new { style = "width: 800px;" })</td>
    </tr>
    <tr>
        <td colspan="3">   @Html.EditorFor(model => model.ArticleContenent)</td>
    </tr>
    <tr>
        <td>  <input type="file" name="fileBigSize"  id="myfile" />   </td>
        </tr>
    <tr>
        <td>  <input type="file" name="fileMediumsize"  id="myfile2" /> </td>
        </tr>
    <tr>
        <td> <input type="file" name="fileLittlesize"  id="myfile3" /></td>
    </tr>
    <tr>
        <td>@Html.HiddenFor(model => model.AuteurId) </td>
            
    </tr>
    <tr>
        <td>  <input type="submit" id="valiarticle" value="Submit" /></td>
    </tr>

</table>
    <div id="t"></div>

}
</div>


  <script src="//code.jquery.com/ui/1.11.3/jquery-ui.js"></script>
<script>



    (function () {
      

        $('.table').hide();
       
       
       
        $('#LabelDateCreation').datepicker();
        var file = $('.tblarticle').find('input:file');
        var bpic = ' <em>  Image de (400 350) px  <b>grande </b> </em> ',
            mpic = '<em> Image de (200 150) px <b> moyenne </b> </em>',
            lpic = '<em> Image de (100 75 ) px <b> petite </b></em> '
        $.each(file, function (index, obj) {
           
            $(file[index]).on('click', function () {
                var $this =this;
                $($this).animate({
                    opacity: 0.4,
                   
                }, 3000, function () {
                 
                    $($this).css('color', 'green');
                   
                    switch (index)
                    {
                        case 0:
                                             $('<td class=to>' + bpic + '</td>', {
                                             }).insertAfter($($this).parent());
                                             break;
                        case 1:
                                           $('<td class=to>' + mpic + '</td>', {
                                           }).insertAfter($($this).parent());
                                             break;
                            
                        case 2:
                                        $('<td class=to>' + lpic + '</td>', {
                                       }).insertAfter($($this).parent());
                                          break;
                    }

     
                });

                 
            });
        });

     
    
    })();
   
  </script>




<script src="@Url.Content("~/Content/chosen/chosen.jquery.js")" type="text/javascript"></script>
<link href="@Url.Content("~/Content/Chosen/chosen.min.css")" rel="stylesheet"  type="text/css" />
<script> $(".chzn-select").chosen(); </script>
@section Scripts {
  


}
